<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>

    </ul>
    <script>
        let arr = [
            { id: 1, name: '张三', text: '哈哈哈哈', date: "1761788771" },
            { id: 2, name: '张三2', text: '哈哈哈哈2', date: "1761788772" },
            { id: 3, name: '张三3', text: '哈哈哈哈3', date: "1761788773" },
            { id: 4, name: '张三4', text: '哈哈哈哈4', date: "1761788774" },
            { id: 5, name: '张三5', text: '哈哈哈哈5', date: "1761788775" },
            { id: 6, name: '张三6', text: '哈哈哈哈6', date: "1761788776" },
        ]
        // 获取ul
        let ul = document.querySelector('ul')
        let li = ''
        for (let i = 0; i < arr.length; i++) {
            
            // let li = document.createElement('li')
            // li.innerHTML=`${arr[i].id}${arr[i].name}${arr[i].text}${arr[i].date}</li>`
            // let but = document.createElement('button')
            // but.innerHTML='删除'
            
            // but.setAttribute('date-index',i)
            // li.appendChild(but)
            // ul.appendChild(li)
        // 邪修
        // li+= `<li>${arr[i].id}${arr[i].name}${arr[i].text}${arr[i].date}</li>`
        // ul.innerHTML=li
         }
        //  添加删除的点击事件
        let but =document.querySelectorAll('button')
        for (let i = 0; i < but.length; i++) {
            but[i].onclick=function(){
                // 获取自定义属性
                console.log(this.getAttribute('date-index'));
                let index = this.getAttribute('date-index')
                // 调用删除元素的函数
                deldom(index)
            }
            
        }
        // 获取dom的方法
        function deldom(index) {
            let li = document.querySelectorAll('li')
            li[index].remove()
        }


    </script>
</body>
</html>